// 最近浏览轮播图
$(function() {



    var imgIndex = 0


    $(".border42 ul").find("li").clone(true).appendTo(".border42 ul")

    function autoplay() {
        imgIndex++
        if (imgIndex >= 12) {
            imgIndex = 1
            $(".border42>ul").css("left", 0)
        }
        for (var i = 0; i < $(".border42>ul").length; i++) {

            $(".border42>ul").animate({
                left: -215 * imgIndex
            })
        }
    }
    var timer = setInterval(autoplay, 1500)

    $(".border4").on("mouseenter", function() {
        clearInterval(timer)
    })
    $(".border4").on("mouseleave", function() {
        timer = setInterval(autoplay, 1500)
    })
    $("#prev1").on("click", function() {
        imgIndex++
        $(".border42>ul").animate({
            left: -215 * imgIndex
        })
        if (imgIndex >= 12) {
            imgIndex = 12
        }
    })
    $("#next1").on("click", function() {
            imgIndex--
            if (imgIndex <= 0) {
                imgIndex = 0

            }
            $(".border42>ul").animate({
                left: -215 * imgIndex
            })
        })
        // 最近浏览轮播图



    // 头部隐藏显示
    $(".allist").on("mouseenter", function() {
        $(".hideboxfirst").css("display", "block")
    }).on("mouseleave", function() {
        $(".hideboxfirst").css("display", "none")
    })


    $(".hideboxfirst").on("mouseenter", function() {
        $(this).css("display", "block")
    })

    // 分类显示隐藏
    $(".taplist").on("mouseenter", function() {
        $(".hideBox").css("display", "block")
    }).on("mouseleave", function() {
        $(".hideBox").css("display", "none")
    })


    $(".hideBox1ul").find("li").each((index, el) => {
        $(el).on("click", function() {
            $(el).addClass("current").siblings().removeClass("current")
            $(".hidelist2ul>div").eq(index).addClass("current").siblings().removeClass("current")
        })

    })

    $(".tapbox1ul").find("li").each((index, el) => {
            $(el).on("click", function() {
                $(el).addClass("current").siblings().removeClass("current")
                $(".tapbox2>ul").eq(index).addClass("current").siblings().removeClass("current")
            })
        })
        // 分类显示隐藏结束


    // 右侧轮播图
    var imgIndex1 = 0


    $(".data-rt-val ul").find("li").clone(true).appendTo(".data-rt-val ul")

    function autoplay1() {
        imgIndex1++
        if (imgIndex1 >= 16) {
            imgIndex1 = 1
            $(".data-rt-val>ul").css("top", 0)
        }
        for (var i = 0; i < $(".data-rt-val>ul").length; i++) {

            $(".data-rt-val>ul").animate({
                top: -157 * imgIndex1
            })
        }
    }
    var timer1 = setInterval(autoplay1, 1500)

    $(".border2_r").on("mouseenter", function() {
        clearInterval(timer1)
    })
    $(".border2_r").on("mouseleave", function() {
        timer1 = setInterval(autoplay1, 1500)
    })
    $(".arrow-left").on("click", function() {
        imgIndex1++
        $(".data-rt-val>ul").animate({
            top: -157 * imgIndex1
        })
        if (imgIndex1 >= 14) {
            imgIndex1 = 14
        }
    })
    $(".arrow-right").on("click", function() {
            imgIndex1--
            if (imgIndex1 <= 0) {
                imgIndex1 = 0

            }
            $(".data-rt-val>ul").animate({
                top: -157 * imgIndex1
            })
        })
        // 右侧轮播图结束


    // 下方tap栏切换
    $(".border3rt").find("span").on("click", function() {
        $(this).addClass("selected").siblings().removeClass("selected")
    })

    $(".border3rt1").on("click", function() {
        $(".border3rc2").show()
        $(".tab-detai").hide()
    })
    $(".border3rt2").on("click", function() {
        $(".border3rc2").hide()
        $(".tab-detai").show()
    })

    // 下方tap栏切换结束

    // 固定导航栏
    $(document).on("scroll", function() {
            var scrollTop = $(this).scrollTop();
            // console.log(scrollTop);
            var topHeight = $(".border3rt").offset().top
                // console.log(topHeight);
            if (scrollTop >= 850) {
                $(".border3rt").css("position", "fixed")
                $(".border3rt").css("top", "0px")
            } else {
                $(".border3rt").css("position", "static")

            }
            if (scrollTop >= ($(".border3r").height() + 850)) {
                $(".border3rt").css("position", "static")
            }

            $(".border3rt1").on("click", function() {

                $(".border3rt").css("position", "fixed")
                $("html").scrollTop(850)

            })
            $(".border3rt2").on("click", function() {

                $(".border3rt").css("position", "fixed")
                $("html").scrollTop(850)

            })
        })
        // 固定导航栏结束

    // 数量++
    var num = 0
    $(".buyAdd").on("click", function() {
        num++
        $(".datanub-value").attr("value", num)
    })

    $(".buyReduce").on("click", function() {
            num--
            if (num <= 0) {
                num = 0
            }
            $(".datanub-value").attr("value", num)
        })
        // 数量++结束



    // 侧边栏
    $(".right-guide").find("li").on("mouseenter", function() {
            $(this).find("span").css("display", "block").stop().animate({
                left: "-70px",
                width: "80px"
            })


        }).on("mouseleave", function() {
            $(this).find("span").css("display", "none").stop().animate({
                left: "0px",
                width: "50px"
            })
        })
        // 侧边栏结束
        // 返回顶部
    $(".right-guide").find("li").eq(6).on("click", function() {
        $("html").stop().animate({
            scrollTop: 0
        }, 1000)
    })


    // 飞入购物车效果
    var num11 = 0
    $("#addCart").on("click", function() {
            num11++
            var $img = $(".border2_l_1").find("img").eq(1).clone(true)
            var $cloneLi = $(".border2_l_1").find("li").eq(0).clone(true);
            var $offstObj = $(".data-number3").offset()
            $offstObj.position = "absolute"
            $img.css($offstObj)
            $img.css("zIndex", "100000000000000")
            $(".data-number3").append($img)
            $(".data-number3").append($cloneLi)
            let target = $(".right-guide").find("div").eq(1).offset()
            target.height = 25;
            target.width = 25
            $img.animate(target, 1000, function() {
                $img.remove()
            })

        })
        // 飞入购物车效果结束



    // 渲染
    var pid = window.location.href.split("?")[1].split("=")[1]
    console.log(pid);


    $.ajax({
        url: `./api/goodsById/${pid}`,
        type: "get"
    }).done(function(res) {
        console.log(res);
        var { data } = res
        console.log(data);
        var html = ``

        html = `
            <li><img src="${data.loupesmall[0]}" alt=""></li>
            <li><img src="${data.loupesmall[1]}" alt=""></li>
            <li><img src="${data.loupesmall[2]}" alt=""></li>
            <li><img src="${data.loupesmall[3]}" alt=""></li>
            <li><img src="${data.loupesmall[4]}" alt=""></li>
                
                `
        var html1 = ``
        html1 = `
        <img src="${data.loupeMiddle[0]}" alt="">
        <div class="zoomPup" style="top: 251px; left: 141.9px; width: 151px; height: 148px; position: absolute; border-width: 1px; display: none;"></div>
        `
        var html2 = ``
        html2 = `
        <img src="${data.loupeBig[0]}" alt="" id="bigImg">
        `

        var html3 = ``
        html3 = `
        <img src="./detailsimages/ziti4.png" alt="" style="width: 80px;height: 20px;"> <span class='pname'>${data.pname}</span>
        `
        var html4 = ``
        html4 = `
        <span id="spnPriceLabel">奥&nbsp;莱&nbsp;价：</span>
        <em id="salePrice">¥<span class='pprice' style="font-size:22px;color:#c81417;font-weight: bold;">${data.pprice}</span></em>
        <del>¥${data.oldprice}</del>
        `
        var html5 = ``
        html5 = `
        <div class="ptattr attr-sec fl " attrtype="Color" data="深兰" title="深兰">
        ${data.colors[0].title}
        <em class="i-core"></em></div>
        <div class="ptattr ptattr-none fl" attrtype="Color" data="黑" title="黑" disabled="disabled">
        ${data.colors[1].title}
        </div>
        `





        $("#hhtml").html(html)
        $(".border2_l_2").html(html1)
        $(".bigArea").html(html2)
        $(".border2_c1").html(html3)
        $("#hhtml4").html(html4)
        $(".hhtml5").html(html5)

        // window.onload = function() {

        // 放大镜
        // var disX = parseInt($(".middleImg").width()) / parseInt($("#bigImg").width()) * parseInt($(".bigArea").width()) + "px"
        // var disY = parseInt($(".middleImg").height()) / parseInt($("#bigImg").height()) * parseInt($(".bigArea").height()) + "px"
        $(".border2_l_1").find("li").each((index, el) => {
            $(el).on("click", function() {
                $(".border2_l_2").find("img").attr({ src: `./detailsimages/border${index+1}middle.jpg` })
                console.log(index);
                $(".bigArea").find("img").attr({ src: `./detailsimages/border${index+1}big.jpg` })
            })
        })


        $(".border2_l_1").find("li").each((index, el) => {
            $(el).on("click", function() {
                $(".border2_l_2").find("img").attr({ src: `${data.loupeMiddle[index]}` })
                console.log(index);
                $(".bigArea").find("img").attr({ src: `${data.loupeBig[index]}` })
            })
        })






        $(".border2_l_2").on("mouseenter", function() {
            $(".zoomPup").css("display", "block")
            $(".bigArea").css("display", "block")
                // var oScale = $(".border2_l_2").Width() / $(".zoomPup").Width();

            $(document).on("mousemove", function(e) {

                var mX = e.pageX - $(".border2_l_2").offset().left - $(".zoomPup").width() / 2
                var mY = e.pageY - $(".border2_l_2").offset().top - $(".zoomPup").height() / 2

                if (mX <= 0) {
                    mX = 0
                }
                if (mY <= 0) {
                    mY = 0
                }
                if (mX > $(".border2_l_2").offset().left) {
                    mX = $(".border2_l_2").offset().left
                }
                if (mY > $(".border2_l_2").offset().top) {
                    mY = $(".border2_l_2").offset().top
                }


                $(".zoomPup").css("left", (mX + "px"))
                $(".zoomPup").css("top", (mY + "px"))


                $("#bigImg").css("left", (mX * -1 + "px"))
                $("#bigImg").css("top", (mY * -1 + "px"))

            })
        })



        $(".border2_l_2").on("mouseleave", function() {
                $(".zoomPup").css("display", "none")
                $(".bigArea").css("display", "none")

            })
            // 放大镜结束

        // 点击选中商品类型
        $(".data-attr2").find("div").on("click", function() {
            $(this).css("borderColor", "#ff3344").siblings().css("borderColor", "#ccc")
            $(this).addClass("current22").siblings().removeClass("current22")
        })



        // }

        // 加入购物车
        $(".data-number3").on("click", function() {
            if ($(".skuAttrs1").find(".current22").length <= 0) {
                alert("请选择颜色")
                return
            }

            if ($("#size11").find(".current22").length <= 0) {
                alert("请选择规格")
                return
            }
            if (document.cookie.length <= 0) {
                layer.alert("小老板，请登录一下咯", {
                    icon: 6
                })

                setTimeout(() => {
                    window.location.href = "DL.html"
                }, 2000);




            }
            var obj = {
                pid: pid,
                pphoto: $("#hhtml").find("li").eq(0).find("img").attr("src"),
                pname: $(".border2_c1").find('.pname').text(),
                pprice: $("#hhtml4").find('.pprice').text(),
                pnum: $("#buyNum").val(),
                uid: JSON.parse($.cookie("loginInfo"))[0].uid,
                psize: $("#size11").find(".current22").text()
            }
            console.log(obj);


            $.ajax({
                url: "./api/addCart",
                type: "post",
                data: obj
            }).then(function(res) {

                layer.msg(res.msg, {
                    icon: res.status == 1 ? 6 : 5
                })
            })
        })
    })

})



$(function() {
    if (document.cookie != null) {
        var str = document.cookie

        $("#gaobuding").html(decodeURIComponent(str).split("=")[1].split(",")[1].split(":")[1])
        if (document.cookie == null) {
            $("#gaobuding").html("123")
        } else {

            $("#gaobuding").html(JSON.parse(decodeURIComponent(str).split("=")[1].split(",")[1].split(":")[1]))

            $("#gaobuding").attr("href", "#")

            $("#gaobuding1").text("退出登录")
                // $("#gaobuding1").css("display", "block")
            console.log(322);
        }

    }

    // 退出登录
    $("#gaobuding1").on("click", function() {
        console.log(111);
        $("#gaobuding1").attr("href", "javascript:viod(0)")
        layer.confirm("您确定要退出登录吗?", {
            icon: 5,
            btn: ["确定", "取消"]
        }, function(index) {
            $.ajax({
                url: "./api/quit",
                type: "get"
            }).then(function(res) {
                layer.msg("退出成功", {
                    icon: 6
                })
                setTimeout(() => {
                    window.location.href = "index.html";
                }, 2000);


            })


            layer.close(index)
        })



    })
})